<template>
    <dl class="download">
        <dd class="left">
            <NuxtImg src="/img/logo.gif" alt="" />
            <NuxtImg v-if="imgindex == 0" src="/img/downleft1.png" alt="" />
            <NuxtImg v-else-if="imgindex == 1" src="/img/downleft2.png" alt="" />
            <NuxtImg v-else-if="imgindex == 2" src="/img/downleft3.png" alt="" />
            <NuxtImg v-else src="/img/downleft4.png" alt="" />
            <div class="android">
                <div>
                    <span v-for="(item, index) in btnlist" @click="btnindex = index"
                        :class="btnindex == index ? 'active' : ''" :key="index">{{ $t(item.name) }}</span>
                </div>
                <div>
                    <NuxtImg src="/img/downloadcode.png" alt="" />
                    <div>
                        <strong>{{ $t('language.download.name') }}</strong>
                        <strong>{{ $t('language.download.copy') }}</strong>
                    </div>
                </div>
            </div>
        </dd>
        <dd class="right">
            <el-carousel @change="change" pause-on-hover motion-blur height="632px" direction="vertical">
                <el-carousel-item v-for="item in imglist" :key="item">
                    <NuxtImg :src="item" alt="" />
                </el-carousel-item>
            </el-carousel>
        </dd>
    </dl>
</template>

<script setup lang="ts">
import { reactive, ref ,shallowRef} from "vue"
let btnindex = shallowRef<number>(0)
let imgindex = shallowRef<number>(0)
let btnlist = reactive([{
    name: "language.download.ios"
}, {
    name: 'language.download.android'
}])
let imglist = shallowReactive<string[]>([
    "/img/download1.png",
    "/img/download2.png",
    "/img/download3.png",
    "/img/download4.png",
]);
let change = <T extends number>(e: T): void => {
    imgindex.value = e
}
</script>
<style lang="scss">
.download {
    width: 100%;

    .el-carousel__indicator {
        width: 10px !important;
        height: 10px !important;
        border-radius: 5px !important;
        padding: 0 !important;
        margin-top: 5px !important;

        .el-carousel__button {
            width: 10px !important;
            height: 10px !important;
            border-radius: 5px !important;
            padding: 0 !important;
            margin-top: 5px !important;
        }

        .el-carousel__button+.el-carousel__button {
            margin-top: 5px !important;
        }
    }
}
</style>
<style scoped lang="scss">
.download {
    width: 100%;
    margin: 0 auto;
    height: calc(100vh - 90px);
    @include flex(row, space-between, center);

    dd {
        flex: 1;
        height: 100%;
    }

    .left {
        @include flex(column, center, center);

        img:nth-child(1) {
            width: 214px;
            margin-bottom: 50px;
        }

        img:nth-child(2) {
            width: 100%
        }

        .android {
            padding: 20px;
            width: 495px;
            border-radius: 10px;
            background-image: linear-gradient(#1c1e22, #1c1e22), linear-gradient(#fff, #fff);

            div:nth-child(1) {
                @include flex(row, center, flex-start);

                span {
                    width: 162px;
                    height: 52px;
                    display: block;
                    line-height: 52px;
                    text-align: center;
                    color: #0a906c;
                    font-size: 18px;
                    border: 1px solid #0a906c;
                    border-radius: 26px;
                    cursor: pointer;
                }

                span+span {
                    margin-left: 20px;
                }

                .active {
                    background-color: #0a906c;
                    color: #fff;
                }
            }

            >div:nth-child(2) {
                margin-top: 15px;
                width: 100%;
                @include flex(row, center, flex-start);
                height: 140px;

                img {
                    width: 140px;
                    margin-right: 15px;
                }

                >div {
                    flex: 1;
                    @include flex(column, space-between, flex-start);
                    height: 100%;

                    strong {
                        width: 100%;
                        height: 62px;
                        display: block;
                        line-height: 62px;
                        font-weight: normal;
                        text-align: center;
                        color: #0a906c;
                        font-size: 18px;
                        border: 1px solid #0a906c;
                        border-radius: 10px;
                        cursor: pointer;

                        &:hover {
                            background-color: #0a906c;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }

    .right {
        @include flex(column, center, center);
        height: 100%;

        .el-carousel {
            width: 100%;
        }

        img {
            width: 100%;
            height: 632px;
        }
    }

}
</style>